<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="role-permission" v-if="permissionList.length">
        <div class="permission-item" v-for="parentChecker in permissionList" :key="parentChecker.id">
          <div class="top-level">
            <el-checkbox @change="toggleTopChecker(parentChecker, $event)" v-model="parentChecker.dataState">{{ parentChecker.resourceName }}</el-checkbox>
          </div>
          <div class="second-level" v-for="subChecker in parentChecker.childResources" :key="subChecker.id">
            <template v-if="parentChecker.childResources.length > 0">
              <div class="checkbox-wrapper">
                <el-checkbox v-model="subChecker.dataState" :title="subChecker.resourceName">{{ subChecker.resourceName }}</el-checkbox>
              </div>
            </template>
          </div>
        </div>
        <el-checkbox v-model="selectAll" @change="toggleSelectAll">全选</el-checkbox>
        <div class="save-btn"><el-button type="primary" plain size="medium " @click="save">确定</el-button></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { list } from '@/api/sys/menu';
import { queryResource } from '@/api/sys/role';
export default {
  data() {
    return {
      permissionList: [{ dataState: false }],
      selectAll: false,
      checklist: []
    };
  },
  computed: {
    ...mapState('role', ['currRolePermission'])
  },
  methods: {
    ...mapActions('role', ['getRolePermission', 'updateRolePermission', 'getRoleResource']),
    save() {
      const getAllSelected = data => {
        let ret = [];
        data.forEach(item => {
          if (item.dataState) ret.push(item.id);
          if (item.childResources && item.childResources.length) {
            const childData = getAllSelected(item.childResources);
            if (childData.length) ret = ret.concat(childData);
          }
        });
        return ret;
      };
      const selectedResource = getAllSelected(this.permissionList);
      this.updateRolePermission({
        resourceIds: selectedResource,
        roleId: this.$route.query.roleId
      }).then(() => {
        this.$message({
          type: 'success',
          message: '更新成功'
        });
        this.$router.go(-1)
      });
    },
    toggleTopChecker(item, newState) {
      console.log(item, newState);
      item.dataState = newState;
      if (item.childResources && item.childResources.length) {
        this.changeAllState(item.childResources, newState);
      }
    },
    changeAllState(list, newState) {
      list.forEach((v, i) => {
        list[i].dataState = newState;
        console.info('list', list[i].resourceName, list[i].dataState);
        if (list[i].childResources && list[i].childResources.length > 0) {
          this.changeAllState(list[i].childResources, newState);
        }
      });
    },
    toggleSelectAll(checked) {
      this.changeAllState(this.permissionList, checked);
      console.log(checked);
    },
    getPermissionInfo() {
      let roleId = this.$route.query.roleId;

      list().then(res => {
        console.info(res);
        this.permissionList = res.result;
        queryResource({ roleId: roleId }).then(res => {
          //回显数据
          const aalist = [];
          this.getallPermission(res.result, aalist);
          this.backvalue(this.permissionList, aalist);
        });
      });
    },
    getallPermission(list, aalist) {
      list.forEach((v, i) => {
        aalist.push(list[i].id);
        if (list[i].childResources && list[i].childResources.length > 0) {
          this.getallPermission(list[i].childResources, aalist);
        }
      });
    },
    backvalue(list, permissionlist) {
      list.forEach((v, i) => {
        if (permissionlist.indexOf(list[i].id) > -1) {
          list[i].dataState = true;
        }
        if (list[i].childResources && list[i].childResources.length > 0) {
          this.backvalue(list[i].childResources, permissionlist);
        }
      });
    }
  },
  mounted() {
    this.getPermissionInfo();
  }
};
</script>

<style lang="scss">
.role-permission {
  .permission-item {
    overflow: hidden;
    margin-bottom: 30px;
  }
  .top-level {
    clear: both;
    line-height: 36px;
    margin-top: 5px;
    border-bottom: 1px solid #d6d6d6;
    .el-checkbox__label {
      font-weight: bold;
      font-size: 16px;
    }
  }
  .second-level {
    display: inline-block;
    margin-top: 20px;
    width: 240px;
    float: left;

    .checkbox-wrapper {
      max-width: 200px;

      .el-checkbox__label {
        max-width: 180px;
        vertical-align: middle;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .save-btn {
    text-align: center;
    line-height: 40px;
  }
}
</style>
